<template>
  <div class="login-page">
    <video class="video" src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4" loop autoplay></video>
    <el-card class="el-card">
      <el-image src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png"></el-image>
      <el-form :model="form" ref="form" :rules="rules"  autocomplete="off">
        <el-form-item>
          <el-input v-model="form.account" prefix-icon="el-icon-s-custom" placeholder="账号"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="密码"/>
        </el-form-item>
        <el-form-item>
              <el-input v-model="form.code" prefix-icon="el-icon-magic-stick" placeholder="验证码"/>
              <img class="captch" :src='url' alt="">
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
// import { login } from '@/api/login'
import { mapActions } from 'vuex'

export default {
  name: 'login-page',
  data () {
    return {
      url: '',
      form: {
        account: 'shenlingadmin',
        password: '123456',
        key: 'CA4B6B6A3E3AB549A43AF2171677170342154',
        code: '',
        tenant: '0000'
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] }],
        password: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }]
      }
    }
  },
  created () {
    this.getCaptcha()
  },
  methods: {
    ...mapActions(['user/login']),
    async getCaptcha () {
      const res = await axios({
        url: 'https://slwl-geteway.itheima.net/manager/captcha?key=CA4B6B6A3E3AB549A43AF2171677170342154',
        responseType: 'blob'
      })
      this.url = URL.createObjectURL(res.data)
    },
    async login () {
      try {
        const valid = await this.$refs.form.validate()
        if (valid) {
          await this['user/login'](this.form)
          await this.$router.push('/')
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .video {
    position: fixed;
    z-index: -100;
  }

  .el-card {
    width: 420px;
    position: absolute;

    //margin: 0 auto;
    // 深度作用选择器   ::v-deep   /deep/
    .el-image {
      display: block;
      width: 200px;
      margin: 0 auto;
      margin-bottom: 20px;
    }

    .el-form {
      padding: 0 20px;

      .captch {
        position: absolute;
        width: 71px;
        height: 32px;
        right: 10px;
        top: 5px;
      }

      .el-button {
        width: 100%;
      }
    }
  }
}
</style>
